<template>
  <div class="home">
    <div class="stick">
      <div class="title">
        <div class="title_text" @click="handleChangeCurrent(0)">
          <span class="title_name" :class="currenIndex == 0 ? 'active' : ''">我的产品</span>
          <div :class="currenIndex == 0 ? 'underLine' : ''"></div>
        </div>

        <div class="title_text" @click="handleChangeCurrent(1)">
          <span class="title_name" :class="currenIndex == 1 ? 'active' : ''">产品库</span>
          <div :class="currenIndex == 1 ? 'underLine' : ''"></div>
        </div>

        <div class="title_img">
          <u-image v-if="currentList == 'grid'" src="../../static/newImg/grid.png" width="40rpx" height="40rpx"
            @click="currentList = 'list'"></u-image>
          <u-image @click="currentList = 'grid'" v-else src="../../static/newImg/list.png" width="40rpx"
            height="40rpx"></u-image>
        </div>
      </div>

      <div class="utabs" v-if="currenIndex == 0">
        <image class="iconclass1" src="/static/businessImg/lefticon.png" width="13rpx" heigth="24rpx"
          @click="change(current - 1)"></image>
        <image class="iconclass2" src="/static/businessImg/righticon.png" width="13rpx" heigth="24rpx"
          @click="change(current + 1)"></image>
        <u-tabs :list="list" :is-scroll="list.length > 4 ? true : false" :current="current" @change="change"
          font-size="28rpx" active-color="red" :show-bar="false" height="148rpx" :active-item-style="{
            'border-radius': '20rpx',
            color: '#FFFFFF',
            background: 'rgb(70, 207,56)',
          }">
        </u-tabs>
      </div>

      <div class="utabs" v-else>
        <image class="iconclass1" src="/static/businessImg/lefticon.png" width="13rpx" heigth="24rpx"
          @click="change(typecurrent - 1)"></image>
        <image class="iconclass2" src="/static/businessImg/righticon.png" width="13rpx" heigth="24rpx"
          @click="change(typecurrent + 1)"></image>
        <u-tabs :list="typeList" :is-scroll="typeList.length > 4 ? true : false" :current="typecurrent"
          @change="typechange" font-size="28rpx" active-color="red" :show-bar="false" height="148rpx"
          :active-item-style="{
            'border-radius': '20rpx',
            color: '#FFFFFF',
            background: 'rgb(70, 207,56)',
          }">
        </u-tabs>
      </div>

      <div v-show="currenIndex == 0" class="myPro">
        <div class="selectdiv">
          <div class="selectdivitem" :class="currentId == item.id ? 'activeItem' : ''" v-for="item in selectList"
            :key="item.id" @click="handleSelectClick(item.id)">
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>

    <div class="prolist" v-show="currenIndex == 0 && currentList == 'grid'">
      <div class="proItem1" v-for="(item, index) in proList" :key="index" @click="handleProClick(item)">
        <div class="proImg">
          <u-image width="100%" height="292rpx" :src="item.image.split(',')[0]"></u-image>
        </div>
        <div class="yongjin" v-if="item.status == 0">可得佣金:￥{{ item.commission || 0 }}</div>
        <div class="yongjin yongjinxiajia" v-else-if="item.status == -1">可得佣金:￥{{ item.commission || 0 }}</div>
        <div class="yongjin yongjinshouqin" v-else>可得佣金:￥{{ item.commission || 0 }}</div>
        <div class="proname1">{{ item.name }}</div>
        <div class="yueshoudiv1">
          <span>月售{{ item.sellNum }}</span>
          <span style="padding-left: 34rpx">库存{{ item.stockNum }}份</span>
        </div>

        <div class="pricediv">￥{{ item.price }}</div>

        <div class="prostatus" v-if="item.status == 0">上架中</div>
        <div class="prostatus prostatusxiajia" v-else-if="item.status == -1">已下架</div>
        <div class="prostatus prostatusshouqin" v-else>已售罄</div>
      </div>
    </div>

    <div class="prolist2" v-show="currenIndex == 0 && currentList == 'list'">
      <div class="proItem2out" v-for="(item, index) in proList" :key="index" @click="handleProClick(item)">
        <div class="mask" v-if="item.status != 0">

          <u-image src="../../static/newImg/xiajia.png" width="169rpx" height="169rpx"
            v-if="item.status == -1"></u-image>
          <u-image src="../../static/newImg/shouqin.png" width="169rpx" height="169rpx" v-else></u-image>
        </div>
        <div class="proItem2">
          <div class="proImg2">
            <u-image :src="item.image.split(',')[0]" width="171rpx" height="171rpx"></u-image>
          </div>
          <div class="flex2">
            <div class="proname2">{{ item.name }}</div>

            <div class="yueshoudiv2">
              <span>月售{{ item.sellNum }}</span>
              <span style="padding-left: 34rpx">库存{{ item.stockNum }}份</span>
            </div>

            <div class="pricediv2">可得佣金:￥<span style="font-size: 32rpx;">{{item.commission || 0}}</span></div>
            <div class=" yongjin2">
              售价: ￥<span style="font-size: 32rpx">{{ item.price }}</span>
            </div>

            <div class="prostatus3" v-if="item.status == 0">上架中</div>
            <div class="prostatus3 prostatusxiajia" v-else-if="item.status == -1">已下架</div>
            <div class="prostatus3 prostatusshouqin" v-else>已售罄</div>
          </div>

        </div>
      </div>
    </div>

    <div class="prolist" v-show="currenIndex == 1 && currentList == 'grid'">
      <div class="proItem" v-for="(item, index) in proStoreList" :key="index" @click="gotochanpingxiangqing(item)">
        <div class="proImg">
          <u-image :src="item.image" width="100%" height="292rpx"></u-image>
        </div>
        <div class="yongjin">可得佣金:￥{{ item.commission || 0 }}</div>
        <div class="proname">{{ item.name }}</div>
        <div class="yueshoudiv">
          <span>月售{{ item.sellNum }}</span>
          <span style="padding-left: 34rpx">库存{{ item.stockNum }}份</span>
        </div>
        <div class="pricediv">￥{{ item.price }}</div>
        <div class="prostatus2" v-if="!add" @click.stop="handleAddBysku(item)">
          添加
        </div>
        <image src="../../static/businessImg/addbtn.png" class="addbtn" v-else @click="handleAddToCart(item)">
        </image>
      </div>
    </div>

    <div class="prolist2" v-show="currenIndex == 1 && currentList == 'list'">
      <div class="proItem2" v-for="(item, index) in proStoreList" :key="index" @click="gotochanpingxiangqing(item)">
        <div class="proImg2">
          <u-image :src="item.image" width="171rpx" height="171rpx"></u-image>
        </div>
        <div class="flex2">
          <div class="proname2">{{ item.name }}</div>

          <div class="yueshoudiv2">
            <span>月售{{ item.sellNum }}</span>
            <span style="padding-left: 34rpx">库存{{ item.stockNum }}份</span>
          </div>

          <div class="yongjin2">
            可得佣金:￥<span style="font-size: 32rpx">{{
              item.commission || 0
              }}</span>
          </div>
          <div class="pricediv2">
            售价: ￥<span style="font-size: 32rpx">{{ item.price }}</span>
          </div>
          <div class="prostatus3" @click.stop="handleAddBysku(item)">
            我要代理
          </div>
        </div>
      </div>
    </div>

    <u-popup v-model="show" mode="center" :mask-close-able="false" width="90%">
      <view class="skupopup">
        <view class="skupopuptitle"> 添加{{ currentProduct.name }}到商品 </view>
        <view class="skupopupprice" v-for="item in currentProduct.specifications">
          <view style="margin-right: 20rpx"> {{ item.name }}规格佣金: </view>
          <input type="text" v-model="item.commission" :disabled="true" />
        </view>
        <view class="skupopupprice">
          <view style="margin-right: 20rpx"> 商品分类: </view>
          <u-input v-model="currentProduct.fenlei" type="select" @click="shows = true" placeholder="请选择产品分类" />
        </view>
        <view class="skupopupbtn">
          <view class="skupopupadd" @click="handleAddSkuTolist"> 添加 </view>
          <view class="skupopupadd" @click="show = false"> 取消 </view>
        </view>
      </view>
    </u-popup>

    <u-action-sheet :list="list" v-model="shows" @click="actionSheetCallback">
    </u-action-sheet>
  </div>
</template>

<script>
import {
  storeProList,
  proTypeList,
  supplierProList,
  addSupplierPro,
  sysType
} from "@/api/storeAdmin.js";

import storage from "@/utils/storage.js";
export default {
  data() {
    return {
      show: false,
      cancelstyleobj: {
        height: "70rpx",
        "border-radius": "35rpx",
        "line-height": "70rpx",
        color: "#ffffff",
        "text-align": "center",
        "font-size": "31rpx",
        "background-color": "rgb(216,216,216)",
      },
      confirmstyleobj: {
        height: "70rpx",
        "border-radius": "35rpx",
        "line-height": "70rpx",
        color: "#ffffff",
        "text-align": "center",
        "font-size": "31rpx",
        "background-color": "rgb(146,207,56)",
        "margin-left": "33rpx",
      },
      count: 0,
      currenIndex: 0,
      currentId: 0,
      mypropage: 1,
      pageSize: 10,
      myprostorepage: 1,
      selectList: [
        {
          id: 1,
          name: "上架中",
        },
        {
          id: 2,
          name: "已售罄",
        },
        {
          id: 3,
          name: "已下架",
        },
      ],
      proList: [],
      proStoreList: [],
      list: [], // 我的产品类别
      typeList: [], // 产品库类别
      current: 0, //我的产品类型当前选择下标
      typecurrent: 0, // 产品库类型当前选择下标
      add: false,
      addCartProList: [],
      currentProduct: {},
      shows: false,
      currentSelect: {},
      currentList: "grid",
    };
  },

  methods: {
    actionSheetCallback(val) {
      this.currentSelect = this.list[val];
      this.$set(this.currentProduct, "fenlei", this.list[val].name);
    },
    getMyproStoreList() {
      let typeId;
      if (this.typeList[this.typecurrent]) {
        typeId = this.typeList[this.typecurrent].id;
      } else {
        typeId = null;
      }

      supplierProList({
        page: this.myprostorepage,
        limit: this.pageSize,
        sysTypeId: typeId,
      }).then((res) => {
        this.proStoreList = [...this.proStoreList, ...res.data.list];
      });
    },
    getList() {
      let typeId;
      if (this.list[this.current]) {
        typeId = this.list[this.current].id;
      } else {
        typeId = null;
      }

      storeProList({
        storeId: storage.getUserInfo().storeId,
        type: this.currentId,
        page: this.mypropage,
        limit: this.pageSize,
        typeId,
      }).then((res) => {
        this.proList = [...this.proList, ...res.data.list];
      });
    },

    gotochanpingxiangqing(item) {
      this.navigateTo(`/pages/business/chanpingxiangqing?id=${item.id}`);
    },
    handleChangeCurrent(val) {
      this.currenIndex = val;
      if (this.currenIndex == 0) {
        this.proList = [];
        this.mypropage = 1;
        this.getList();
      } else {
        this.proStoreList = [];
        this.myprostorepage = 1;
        this.getMyproStoreList();
      }
    },
    handleSelectClick(val) {
      this.currentId = val;
      this.mypropage = 1;
      this.proList = [];
      this.getList();
    },

    change(val) {
      if (val == -1) {
        this.current = 0;
      } else if (val == this.list.length) {
        this.current = this.list.length - 1;
      } else {
        this.current = val;
      }

      this.mypropage = 1;
      this.proList = [];

      this.getList();
    },

    typechange(val) {
      if (val == -1) {
        this.typecurrent = 0;
      } else if (val == this.typeList.length) {
        this.typecurrent = this.typeList.length - 1;
      } else {
        this.typecurrent = val;
      }

      this.myprostorepage = 1;
      this.proStoreList = [];

      this.getMyproStoreList();
    },
    handleProClick(item) {
      this.navigateTo(`/pages/business/shangpinxiangqing?id=${item.id}`);
    },
    handleAddToCart(item) {
      let obj = {};
      obj.id = item;
      let that = this;
      uni.getStorage({
        key: "addCartProList",
        success: function (res) {
          const arr = res.data;
          let flag = false;
          arr.forEach((i) => {
            if (i.id == item) flag = true;
          });
          if (flag) return;
          arr.push(obj);
          uni.setStorage({
            key: "addCartProList",
            data: arr,
            success: function () {
              that.addCartProList = arr;
              that.count = arr.length;
            },
          });
        },
        fail(f) {
          const arr = [];
          arr.push(obj);
          uni.setStorage({
            key: "addCartProList",
            data: arr,
            success() {
              that.count = arr.length;
              that.addCartProList = arr;
            },
          });
        },
      });
    },

    handleAddBysku(item) {
      this.show = true;
      this.currentProduct = {
        ...item,
      };
    },

    handleAddSkuTolist() {
      const { price, id, specifications } = this.currentProduct;
      addSupplierPro({
        price,
        proId: id,
        specifications,
        storeId: storage.getUserInfo().storeId,
        typeId: this.currentSelect.id,
      }).then((res) => {
        if (res.code == "000000") {
          uni.showToast({
            title: "添加成功",
            icon: "none",
          });

          this.show = false;
        }
      });
    },

    navigateTo(url) {
      uni.navigateTo({
        url: url,
      });
    },

    proTypeList() {
      proTypeList({
        id: storage.getUserInfo().storeId,
      }).then((res) => {
        this.list = res.data;

        let that = this;
        let obj = [];
        if (res.data != null && res.data != "" && res.data != "[]") {
          res.data.forEach((item) => {
            obj.push({
              ...item,
              text: item.name,
            });
          });
        }
        this.list = obj;
        this.getList();
      });
    },

    // 查询产品库类别

    slectTypeList() {
      sysType({
        id: storage.getUserInfo().storeId,
      }).then((res) => {
        let that = this;
        let obj = [];
        if (res.data != null && res.data != "" && res.data != "[]") {
          res.data.forEach((item) => {
            obj.push({
              ...item,
              text: item.name,
            });
          });
        }
        this.typeList = obj;
      });
    },
    handleShowProCart() {
      this.show = true;
    },

    handleDelAddStore(item) {
      let that = this;

      uni.getStorage({
        key: "addCartProList",
        success: function (res) {
          const arr = res.data;

          arr.forEach((i, index) => {
            if (i.id == item.id) {
              arr.splice(index, 1);
            }
          });

          uni.setStorage({
            key: "addCartProList",
            data: arr,
            success: function () {
              that.count = arr.length;
              that.addCartProList = arr;
            },
          });
        },
      });
    },
    confirm() { },
  },

  created() {
    uni.$on("onShowTrue", () => {
      this.myprostorepage = 1;
      this.mypropage = 1;
      this.proList = [];
      this.proStoreList = [];

      if (this.currenIndex == 0) {
        this.getList()
      } else {
        this.getMyproStoreList()
      }
      // this.proTypeList();
    });
  },

  mounted() {
    let that = this;
    uni.$on("onReachBottomtrue", () => {
      if (this.currenIndex == 0) {
        this.mypropage = this.mypropage + 1;
        this.getList();
      }
      if (this.currenIndex == 1) {
        this.myprostorepage = this.myprostorepage + 1;
        this.getMyproStoreList();
      }
    });

    uni.getStorage({
      key: "addCartProList",
      success(res) {
        (that.count = res.data.length), (that.addCartProList = res.data);
      },
      fail() {
        that.count = 0;
      },
    });

    this.proTypeList();
    this.slectTypeList();
    // this.getMyproStoreList();

    // this.getList();
  },
};
</script>

<style scoped>
.home {
  width: 100%;
  background: #ffffff;
}

.stick {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #ffffff;
}

.title {
  width: 100%;
  height: 42rpx;
  padding-top: 107rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background: #ffffff;
  position: relative;
}

.title_text {
  padding-left: 38rpx;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 148rpx;
  height: 42rpx;
  align-content: center;
}

.title_img {
  position: absolute;
  right: 61rpx;
}

.title_name {
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 30rpx;
  color: #818181;
}

.underLine {
  width: 148rpx;
  height: 10rpx;
  background: rgb(70, 207, 56);
}

.active {
  font-family: Source Han Sans CN;
  font-weight: bold;
  font-size: 33rpx;
  color: #000000;
}

.myPro {
  padding: 0rpx 43rpx;
}

.utabs {
  width: 600rpx;
  height: 48rpx;
  margin: 40rpx auto 10rpx;
  position: relative;
}

.selectdiv {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  height: 48rpx;
  padding-top: 12rpx;
  background: #ffffff;
}

.selectdivitem {
  width: 130rpx;
  height: 48rpx;
  text-align: center;
  line-height: 48rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 28rpx;
  color: #cecece;
  margin-right: 41rpx;
  border-radius: 30rpx;
}

.activeItem {
  color: #ffffff;
  background: rgb(70, 207, 56);
}

.prolist {
  padding: 22rpx 43rpx;
  padding-bottom: 100px;

  display: grid;
  grid-template-columns: repeat(auto-fill, 292rpx);
  grid-gap: 39rpx 59rpx;
  justify-content: center;
}

.prolist2 {
  width: 100%;
  box-sizing: border-box;
  padding: 22rpx 0;

  display: flex;
  justify-content: center;
  flex-wrap: wrap;
}

.mask {
  width: 100%;
  height: 181rpx;
  background: rgba(23, 23, 24, 0.6);

  position: absolute;
  z-index: 1;

  display: flex;
  align-items: center;
  justify-content: center;
}

.proItem {
  width: 292rpx;
  height: 491rpx;
  position: relative;
  background: rgb(247, 247, 247);
}

.proItem1 {
  width: 292rpx;
  height: 491rpx;
  position: relative;
  background: rgb(247, 247, 247);
}

.proItem2 {
  width: 100%;
  box-sizing: border-box;
  height: 181rpx;
  background: rgb(251, 251, 251);
  padding: 5rpx 59rpx;
  display: flex;
  align-items: center;
  margin-bottom: 17rpx;
  position: relative;
}

.proItem2out {
  width: 100%;
  position: relative;
}

.proImg {
  width: 100%;
  height: 292rpx;
}

.proImg2 {
  width: 171rpx;
  height: 171rpx;
}

.flex2 {
  flex: 1;
  height: 100%;
  position: relative;
}

.proname {
  width: 270rpx;
  height: 24rpx;
  font-family: PingFang;
  font-weight: bold;
  font-size: 25rpx;
  color: #0d182e;
  line-height: 24rpx;
  position: absolute;
  top: 351rpx;
  left: 14rpx;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proname1 {
  width: 270rpx;
  height: 24rpx;
  font-family: PingFang;
  font-weight: bold;
  font-size: 25rpx;
  color: #0d182e;
  line-height: 24rpx;
  position: absolute;
  top: 351rpx;
  left: 14rpx;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.proname2 {
  width: 330rpx;
  height: 58rpx;
  font-family: PingFang;
  font-weight: bold;
  font-size: 25rpx;
  color: #0d182e;
  line-height: 29rpx;
  position: absolute;
  top: 14rpx;
  left: 14rpx;

  /* overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap; */
}

.yongjin {
  width: 100%;
  height: 44rpx;
  line-height: 44rpx;
  font-size: 25rpx;
  color: #ffffff;
  text-align: center;
  background: #ff3a3a;
}

.yongjinshouqin {
  text-decoration: line-through;
}

.yongjinxiajia {
  background: rgb(216, 216, 216);
}

.yongjin2 {
  width: 200rpx;
  height: 27rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 24rpx;
  color: #ff3a3a;
  position: absolute;
  bottom: 20rpx;
  left: 14rpx;
}

.yueshoudiv {
  width: 270rpx;
  height: 21rpx;
  line-height: 21rpx;
  position: absolute;
  left: 16rpx;
  top: 392rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 22rpx;
  color: #878c9a;
}

.yueshoudiv2 {
  width: 270rpx;
  height: 21rpx;
  line-height: 21rpx;
  position: absolute;
  left: 16rpx;
  top: 392rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 22rpx;
  color: #878c9a;
  position: absolute;
  left: 14rpx;
  top: 86rpx;
}

.yueshoudiv1 {
  width: 270rpx;
  height: 21rpx;
  line-height: 21rpx;
  position: absolute;
  left: 16rpx;
  top: 392rpx;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 22rpx;
  color: #878c9a;
}

.pricediv {
  width: 140rpx;
  height: 25rpx;
  font-family: PingFang;
  font-weight: 500;
  font-size: 24rpx;
  color: #ff3a3a;
  line-height: 25rpx;
  position: absolute;
  bottom: 17rpx;
  left: 16rpx;
}

.pricediv2 {
  width: 200rpx;
  height: 27rpx;
  font-family: Source Han Sans CN;
  font-weight: 500;
  font-size: 24rpx;
  color: #ff3a3a;
  position: absolute;
  bottom: 20rpx;
  left: 320rpx;
}

.prostatus {
  width: 106rpx;
  height: 33rpx;
  border-radius: 50rpx;
  text-align: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 23rpx;
  color: #ffffff;
  line-height: 33rpx;
  position: absolute;
  right: 14rpx;
  bottom: 13rpx;
  background: rgb(148, 207, 57);
}

.prostatusxiajia {
  background: rgb(216, 216, 216) !important;
}

.prostatusshouqin {
  background: rgb(207, 57, 57) !important;
}

.prostatus2 {
  width: 106rpx;
  height: 33rpx;
  border-radius: 50rpx;
  text-align: center;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 23rpx;
  color: #ffffff;
  line-height: 33rpx;
  position: absolute;
  right: 14rpx;
  bottom: 13rpx;
  background: rgb(255, 63, 59);
}

.prostatus3 {
  width: 109rpx;
  height: 36rpx;
  background: rgb(148, 207, 57);
  border-radius: 5rpx;
  text-align: center;
  line-height: 36rpx;
  font-family: Adobe Heiti Std;
  font-weight: normal;
  font-size: 23rpx;
  color: #ffffff;
  position: absolute;
  top: 14rpx;
  right: 0;
}

.iconclass1 {
  width: 13rpx;
  height: 24rpx;
  position: absolute;
  left: -33rpx;
  top: 50%;
  transform: translateY(-50%);
}

.iconclass2 {
  width: 13rpx;
  height: 24rpx;
  position: absolute;
  right: -33rpx;
  top: 50%;
  transform: translateY(-50%);
}

::v-deep .u-tab-item {
  height: 48rpx;
  line-height: 48rpx;
  font-size: 28rpx;
}

.adddiv {
  width: 100%;
  height: 130rpx;
  background: #ffffff;
  position: fixed;
  bottom: 50px;
}

.addimg {
  width: 97rpx;
  height: 97rpx;
  position: absolute;
  right: 42rpx;
}

.addtext {
  width: 93rpx;
  height: 23rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 24rpx;
  color: #000000;
  position: absolute;
  top: 100rpx;
  right: 45rpx;
}

.addbtn {
  width: 48rpx;
  height: 48rpx;
  position: absolute;
  right: 14rpx;
  bottom: 13rpx;
}

.backbtn {
  width: 200rpx;
  height: 23rpx;
  font-family: Source Han Sans CN;
  font-weight: 400;
  font-size: 24rpx;
  color: #000000;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 60rpx;
}

::v-deep .u-model__footer {
  padding: 36rpx 36rpx;
}

.scroll-Y {
  height: 1100rpx;
}

.addstoreview {
  width: 100%;
  height: 100rpx;
  padding: 36rpx;
  display: grid;
  grid-template-columns: repeat(auto-fill, 183rpx);
  grid-gap: 27rpx 27rpx;
  justify-content: center;
}

.addstoreviewItem {
  width: 183rpx;
  height: 183rpx;
  background: black;
  position: relative;
}

.deldiv {
  width: 31rpx;
  height: 31rpx;
  background: url("../../static/businessImg/del.png") no-repeat;
  background-size: 100% 100%;
  position: absolute;
  top: -15rpx;
  right: -15rpx;
}

.skupopup {
  width: 100%;
  padding: 30rpx;
}

.skupopupprice {
  margin-top: 20rpx;
  display: flex;
  align-items: center;
}

.skupopupbtn {
  width: 100%;
  height: 58rpx;
  margin-top: 30rpx;

  display: flex;
  align-items: center;
  justify-content: space-around;

  .skupopupadd {
    text-align: center;
    width: 30%;
    height: 100%;
    line-height: 58rpx;
    border-radius: 29rpx;
    background: rgb(132, 194, 87);
    color: #ffffff;
  }
}
</style>
